<template>
    <div>
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <!-- <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="100px" dialogWidth="500px" :isHandle="true" /> -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchData: {
                orderNo: '',
                nickName: '',
                agentName: '',
                merchantName: '',
                state: '255',
                aftersaleState:'',
                etime: ''
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'orderNo',
                    placeholder: '订单编号',
                    width: 150
                },
                {
                    type: 'input',
                    prop: 'nickName',
                    placeholder: '下单用户',
                    width: 150
                },
                {
                    type: 'select',
                    prop: 'agentName',
                    placeholder: '代理商',
                    width: 130,
                    change: e => this.changeAgent(e),
                    options: [

                    ]
                },
                {
                    type: 'select',
                    prop: 'merchantName',
                    placeholder: '商家',
                    width: 120,
                    options: [
                    ]
                },
                {
                    type: 'select',
                    prop: 'aftersaleState',
                    placeholder: '订单状态',
                    width: 150,
                    options: [
                        {
                            label: '待审核',
                            value: '1'
                        },
                        {
                            label: '已退款',
                            value: '2',
                        },
                        {
                            label: '不退款',
                            value: '3',
                        },
                    ]
                },
                {
                    type: 'date',
                    prop: 'etime',
                    placeholder: '提交时间',
                    width: 170,
                    options: [
                    ]
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                },
                {
                    label: "导出Excel",
                    icon: 'el-icon-download',
                    type: "success",
                    loading: false,
                    handle: (that) => this.handleDownload(),
                },
            ],
            tableData: [

            ],
            tableCols: [
                {
                    label: '订单编号',
                    prop: 'orderNo',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '提交时间',
                    prop: 'aftersaleCreatedTime'
                },
                {
                    label: '设备编号',
                    prop: 'equipmentNo'
                },
                {
                    label: '所属商家',
                    prop: 'merchantName'
                },
                {
                    label: '下单用户',
                    prop: 'nickName'
                },
                {
                    label: '支付金额',
                    prop: 'actuallyPaidMoney'
                },
                {
                    label: '支付方式',
                    prop: 'payType',
                    formatter: e => e.payType == 1 ? "未知" : e.payType == 2 ? '微信公众号支付' : e.payType == 3 ? '微信公众号免密支付' : e.payType == 4 ? '微信人脸识别支付' : e.payType == 5 ? 'IC卡支付' : e.payType == 6 ? '支付宝支付' : e.payType == 7 ? '支付宝免密支付' : e.payType == 8 ? '余额' : ''
                },
                {
                    label: '订单状态',
                    prop: 'aftersaleState',
                    theme: e => 'primary', type: "tag",
                    formatter: e => e.aftersaleState == 0 ? "待审核" :e.aftersaleState == 1 ? '已退款' : e.aftersaleState == 3 ? '拒绝退款' : '非售后状态'
                },
                {
                    label: '操作',
                    type: "button",
                    btnList: [
                        {
                            label: '订单详情',
                            type: 'primary',
                            // isShow: e => e.orderNo == '123' ? true : false,
                            handle: e => this.goDetail(e)
                        }
                    ]
                }

            ],
            tablePage: { limit: 10, page: 1, total: 0 },

        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let param = { ...this.searchData, ...this.tablePage, }
            let res = await this.api.orderlist(param)
            if (res) {
                this.tableData = res.data.list
                this.tablePage.total = res.data.total
            }
            let operatorId = ''
            let resOpt = await this.api.getOperatorList({})
            if (resOpt) {
                operatorId = resOpt.data.operatorId
            }
            let resAgent = await this.api.getAgentList({
                userId: operatorId
            })
            let resMerchant = await this.api.getMerchantList({
                userId: operatorId
            })
            if (resAgent) {
                this.searchForm[2].options = []
                // this.searchForm[2].options = resAgent.data
                for (let i = 0; i < resAgent.data.length; i++) {
                    this.searchForm[2].options.push({
                        label: resAgent.data[i].name,
                        value: resAgent.data[i].agentId
                    })
                }
            }
            if (resMerchant) {
                this.searchForm[3].options = []
                for (let i = 0; i < resMerchant.data.length; i++) {
                    this.searchForm[3].options.push({
                        label: resMerchant.data[i].name,
                        value: resMerchant.data[i].merchantId
                    })
                }
            }
        },
        async changeAgent(e) {
            //     console.log(e);
            //     let resMerchant = await this.api.getMerchantList({
            //         userId: e
            //     })
            //     if (resMerchant) {
            //         this.searchForm[3].options=[]
            //         for (let i = 0; i < resAgent.data.length; i++) {
            //             this.searchForm[3].options.push({
            //                 label: resMerchant.data[i].name,
            //                 value: resMerchant.data[i].agentId
            //             })
            //         }
            //     }
        },
        //查询
        elFormSubmit() {

        },
        goDetail(e) {
            // console.log(e);
            this.$router.push({ path: '/saleServe-fresh_Detail', query: { id: e.id } })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                // if (j === 'connectedStatus') {
                //     return v[j] == 1 ? "在线" : "离线"
                // } else if (j === 'status') {
                //     return v[j] == 1 ? "正常" : v[j] == 2 ? "设备维护中" : "未激活"
                // } else {
                return v[j]
                // }
            }))
        },
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
</style>